<template>
  <div>
    <div class="register" @click="denglu">
      <div>
        <div class="tou"><img :src="avatarSrc" alt="" /></div>
        <p>{{ nickname }}</p>
        <span @click="tuichu">{{ tubiao }}</span>
      </div>
    </div>
    <!-- <van-grid :column-num="3"> -->
    <!--             <van-grid-item  icon="label-o" text="我的订单" />
            <van-grid-item  icon="bill-o" text="优惠券" />
            <van-grid-item  icon="goods-collect-o" text="礼品卡" />
            <van-grid-item  icon="location-o" text="我的收藏" />
            <van-grid-item  icon="flag-o" text="足迹" />
            <van-grid-item  icon="contact" text="会员福利" />
            <van-grid-item  icon="aim" text="地址管理" />
            <van-grid-item  icon="warn-o" text="账号安全" />
            <van-grid-item  icon="service-o" text="联系客服" />
            <van-grid-item  icon="question-o" text="帮助中心" />
            <van-grid-item  icon="smile-comment-o" text="意见反馈" /> -->
    <!--         </van-grid> -->
    <van-grid :column-num="3">
      <van-grid-item icon="label-o" text="我的订单" />
                  <van-grid-item icon="bill-o" text="优惠券" />
                  <van-grid-item icon="goods-collect-o" text="礼品卡" />
                  <van-grid-item icon="location-o" text="我的收藏" />
                  <van-grid-item icon="flag-o" text="足迹" />
                  <van-grid-item icon="contact" text="会员福利" />
                  <van-grid-item icon="aim" text="地址管理" />
                  <van-grid-item icon="warn-o" text="账号安全" />
                  <van-grid-item icon="service-o" text="联系客服" />
                  <van-grid-item icon="question-o" text="帮助中心" />
                  <van-grid-item icon="smile-comment-o" text="意见反馈" />
    </van-grid>

    <van-popup v-model="show">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="danger" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <!-- 退出弹出框 -->
    <van-dialog
      v-model="tuichushow"
      title="提示"
      show-cancel-button
      @confirm="tuicdl"
    >
      <p style="text-align: center; margin: 10px 0">确认退出?</p>
    </van-dialog>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import { postdenglu } from "@/request/api";
import avatarSrc from "../assets/avatar.png";
export default {
  data() {
    return {
      show: false,
      username: "",
      password: "",
      avatarSrc: require("../assets/avatar.png"),
      nickname: "请登录",
      tubiao: ">",
      tuichushow: false,
    };
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.avatarSrc = userInfo.avatar;
      this.nickname = userInfo.nickname;
      this.tubiao = "x";
    }
  },
  computed:{
    ...mapState({
      isGoBack:state=>state.isGoBack.isGoBack
    })
  },
  methods: {
    ...mapMutations({
      chanisGoBack:'isGoBack/chanisGoBack'
    }),

    //退出确认
    tuichu() {
      let token = localStorage.getItem("token");
      if (!token) return;
      this.tuichushow = true;
    },
    //退出
    tuicdl() {
      this.$toast.success("退出成功");
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.avatarSrc = avatarSrc;
      this.nickname ='请登录';
      this.tubiao = ">";
    },
    denglu() {
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.show = true;
    },
    onSubmit(values) {
      console.log("submit", values);
      postdenglu({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        console.log(res);

        let userInfo = res.data.userInfo;
        this.$toast.success("登录成功");
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo));

        setTimeout(() => {
          this.show = false;
          this.avatarSrc = userInfo.avatar;
          this.nickname = userInfo.nickname;
          this.tubiao = "x";
        }, 500);
            //强制过来的登录成功后跳回去 isGoBack vuex数据
            if(this.isGoBack){
              this.$router.go(-1)
              this.chanisGoBack(false)
            }  
      
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.register {
  box-sizing: border-box;
  width: 100%;
  height: 120px;
  background-color: #333333;
  padding: 20px;
  .tou {
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 40px;
  }
  p {
    display: inline-block;
    line-height: 80px;
    width: 250px;
    height: 80px;
    margin-left: 10px;
    color: #fff;
  }
  span {
    float: right;
    font-size: 18px;
    margin-top: 31px;
    color: #fff;
  }
}
.van-popup--center {
  width: 80%;
}
.van-grid-item {
  height: 138px;
}
</style>